<template>
  <div id="information">
    <!-- <el-collapse v-model="open">
      <el-collapse-item title="添加优惠卷" name="1">
        <ul class="content-list">
          <li>
            <el-table :data="[{date:1}]" style="width: 100%">
              <el-table-column prop="date" label="优惠卷" min-width="300">
                <div class="product-intro">
                  <svg style="width:20px;height:20px;" class="icon" aria-hidden="true">
                  <use xlink:href="#iconyouhuiquan" />
                </svg>
                  <p>全品类可用（特殊商品除外）</p>
                </div>
              </el-table-column>
              <el-table-column prop="name" label="价格" min-width="80">
                <span>￥5.00</span>
              </el-table-column>
              <el-table-column prop="address" label="操作" min-width="80">
                <div class="product-operate">
                  <span>替换</span>
                  <span>删除</span>
                </div>
              </el-table-column>
            </el-table>
          </li>
          <div class="product-add">+添加商品(0/20)</div>
        </ul>
      </el-collapse-item>
    </el-collapse> -->
    <el-collapse v-model="open2">
      <el-collapse-item title="内容样式" name="2">
        <ul class="content-list">
          <li>
            <span>标题：</span>
            <div>
              <el-input
                style="width:350px"
                size="small"
                type="text"
                placeholder="请输入内容"
                v-model="styles.title"
                maxlength="6"
                show-word-limit
              />
            </div>
          </li>
          <li>
            <span>上间距：</span>
            <div>
              <edgeSetting v-model="styles.marginTop" unit="px" :max="50" :init="Number(styles.marginTop)"></edgeSetting>
            </div>
          </li>
          <li>
            <span>下间距：</span>
            <div>
              <edgeSetting v-model="styles.marginBottom" unit="px" :max="50" :init="Number(styles.marginBottom)"></edgeSetting>
            </div>
          </li>
          <li>
            <span>左右间距：</span>
            <div>
              <edgeSetting v-model="styles.marginLR" unit="px" :max="50" :init="Number(styles.marginLR)"></edgeSetting>
            </div>
          </li>
          <li>
            <span>圆角：</span>
            <div>
              <edgeSetting
                v-model="styles.circle"
                unit="px"
                :max="15"
                :init="Number(styles.circle)"
              ></edgeSetting>
            </div>
          </li>
        </ul>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
import edgeSetting from "../../comm/edgeSetting";
export default {
  name: "information",
  data() {
    return {
      open: "1",
      open2: "2",
    };
  },
  created() {
  },
  components:{
      edgeSetting
  },
  computed: {
    ...mapState(["list", "currentId"]),
    styles() {
      return this.list[this.currentId].styles;
    },
  },
};
</script>
<style lang='less' scoped>
@import url("../../../assets/css/base.less");
/deep/.el-table_1_column_2 {
  text-align: right;
}
/deep/.el-table_1_column_3 {
  text-align: right;
}
/deep/.el-table th,
.el-table tr {
  background-color: #f7f7f7;
}
/deep/.el-button--mini,
.el-button--mini.is-round {
  padding: 7px 10px;
}
.product-operate {
  color: #2d8cf0;
}
.product-intro {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  > p {
    margin-left: 5px;
  }
}
.product-add {
  text-align: center;
  cursor: pointer;
  margin-top: 20px;
  color: #2d8cf0;
}
</style>
